<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f2f2f2;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        #hd_top {
            height: 30px;
            line-height: 30px;
            background: #fff;
        }

        #hd_top .el-button--text {
            font-size: 13px;
            color: #666;
        }

        #hd_top a {
            font-size: 13px;
        }

        #hd_d1 {
            width: 800px;
            float: left;
            overflow: hidden;
            height: 40px;
            margin: 0 15px auto;
        }

        #hd_d1 ul li a:hover, #d2 a:hover {
            background-color: white;
            color: #D32031;
        }

        #hd_d1 ul li a {
            color: white;
            display: block;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
        }

        #hd_d2 {
            float: right;
        }

        input {
            height: 25px;
            width: 400px;
            margin-left: 18px;
        }

        ul {
            display: block;
        }

        ul li {
            margin: 0;
            list-style: none;
        }

        #hd_d1 ul {
            overflow: hidden;
            float: left;
        }

        #hd_d1 li {
            float: left;
        }

        #hd_d2 li {
            float: left;
        }

        #hd_d2 a {
            height: 30px;
            line-height: 30px;
            padding: 5px 15px !important;
            color: #fff;
            display: block;
            font-size: 12px;
            font-weight: normal;
        }

        .el-main {
            padding: 0;
        }

        .el-aside {
            margin-left: 5px;
        }

        #scbar {
            width: 990px;
            overflow: hidden;
            height: 42px;
            line-height: 38px;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #E9EFF5;
            background: #E8EFF5
        }

        .box-card img {
            width: 100%;
        }

        .plate {
            display: block;
            background-color: white;
            border: 1px solid black;
            border-radius: 5px;
            width: 190px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            margin-bottom: 10px;
        }

        .plate:hover {
            background-color: #ff6b23;
            color: white;
        }

        #cele {
            font-size: 12px;
            text-align: left;
            color: #999;
            margin-bottom: 20px;
            height: 40px;
            padding-right: 10px;
        }

        footer {
            margin-top: 15px;
        }

        #ft_top {
            height: 170px;
            width: 900px;
            margin: 0 auto
        }

        #ft_top div {
            padding-top: 30px;
            text-align: center;
            width: 300px;
            float: left;
        }

        #ft_top p {
            margin-bottom: 5px;
        }

        #ft_top h3 {
            margin-bottom: 10px;
        }

        #ft_bottom {
            background-color: #363636;
            height: 120px;
            width: 990px;
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
            font-size: 12px;
        }

        #ft_bottom p {
            margin-bottom: 5px;
        }

        #ft_bottom a, #ft_bottom p {
            color: #FFFFFF;

        }


    </style>
</head>
<body>
<div id="app">
    <header style="margin-bottom: 20px">
        <div id="hd_top">
            <div style="width: 990px; margin: 0 auto">
                <a href="index.html" style="margin-left: 20px">严选车官网</a>
                <el-button type="text" @click="open">收藏本站</el-button>
            </div>
        </div>
        <div style="height:40px; width:100%; background-color: #e14800">
            <div style="width: 990px;margin: 0 auto">
                <div id="hd_d1">
                    <ul>
                        <a href="forumIndex.html" title="严选车社区" style="float:left; margin:-8px 15px 0 0;">
                            <img src="forumImg/logo.png" alt="严选车社区" border="0">
                        </a>
                        <li style="background-color: white">
                            <a href="forumIndex.html" style="color: red">首页</a>
                        </li>
                        <li>
                            <a href="">社区</a>
                        </li>
                        <li>
                            <a href="">积分商城</a>
                        </li>
                        <li>
                            <a href="">车友会群</a>
                        </li>
                        <li>
                            <a href="">每日精选</a>
                        </li>
                        <li>
                            <a href="">问题反馈</a>
                        </li>
                    </ul>
                </div>
                <div id="hd_d2">
                    <ul>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/login.html">登录</a>
                        </li>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/reg.html">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="border-bottom: 0 solid #C2D5E3">
            <div style="width:990px;margin: 0 auto">
                <div id="scbar">
                    <input type="text" placeholder="请输入搜索内容" v-model="search">
                    <select id="mySelect" style="height: 30px">
                        <option value="1">文章</option>
                        <option value="2">帖子</option>
                        <option value="3">用户</option>
                    </select>
                    <el-button icon="el-icon-search" size="small" @click="search()"></el-button>
                    <b style="font-size: 15px"> 热搜: </b>
                    <a v-for="h in hotSearchArr" :href="h.url"
                       style="font-size: 13px;color: #369;margin-left: 10px">{{h.name}}</a>
                </div>
            </div>
        </div>
    </header>
    <main style="margin-bottom: 20px">
        <div style="width: 990px;margin: 0 auto">
            <header style="margin-bottom: 20px">
                <div>
                    <a href="">
                        <img src="https://misc.rrcimg.com/data/attachment/portal/202302/28/153904zyf4qqjqpfakh74z.jpg"
                             alt=""
                             style="width: 100%">
                    </a>
                </div>
            </header>
            <main>
                <el-container>
                    <el-main>
                        <el-card class="box-card">
                            <div v-for="art in articleArr">
                                <p style="margin-bottom: 10px"><b>{{art.title}}</b></p>
                                <div style="font-size: 13px; margin-bottom:10px; overflow: hidden; color: #c5c5c5">
                                    <p style="float: left">{{art.author}} 发布于 {{art.created}}</p>
                                    <p style="float: right">阅读量：{{art.readCount}} 回复：{{art.replyCount}}</p>
                                </div>
                                <div>
                                    <a :href="art.url" style="text-align: center">
                                        <img :src="art.img" alt="">
                                    </a>
                                </div>
                            </div>
                        </el-card>
                    </el-main>
                    <el-aside width="250px">
                        <el-card class="box-card" style="height: 250px">
                            <div slot="header" class="clearfix">
                                <b>板块推荐</b>
                            </div>
                            <div style="margin: 0 auto;text-align: center">
                                <a class="plate" href="">严选车友</a>
                                <a class="plate" href="">求助咨询</a>
                                <a class="plate" href="">有奖活动</a>
                            </div>
                        </el-card>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>名人推荐</span>
                            </div>
                            <ul style="float: left; width: 210px">
                                <li v-for="c in celebrity">
                                    <div style="height: 55px;width: 55px;float: left;margin-right: 10px;border-radius: 35px">
                                        <a :href="c.url"><img :src="c.img" alt="" height="100%"></a>
                                    </div>
                                    <div>
                                        <a :href="c.url"><p>{{c.name}}</p></a>
                                    </div>
                                    <p id="cele">{{c.description}}</p>
                                </li>
                            </ul>
                        </el-card>
                    </el-aside>
                </el-container>
            </main>
        </div>
    </main>
    <footer>
        <div style="background: #DCDADB">
            <div id="ft_top">
                <div>
                    <h3>关于我们</h3>
                    <p>
                        <el-link href="index.html" icon="el-icon-link">网站首页</el-link>
                        <el-link href="introduction.html" icon="el-icon-link">关于我们</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">加入我们</el-link>
                        <el-link href="" icon="el-icon-link">联系我们</el-link>
                    </p>
                </div>
                <div>
                    <h3>联系我们</h3>
                    <p>
                        <el-link href="" icon="el-icon-link">网站:http://localhost:8080/index.html</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">微博:</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">客服电话:</el-link>
                    </p>
                </div>
                <div>
                    <h3>关注我们</h3>
                </div>
            </div>
        </div>
        <div style="background-color: #363636">
            <div id="ft_bottom">
                <p>
                    <a href="">手机版</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">个人收藏</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">小黑屋</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
                </p>
                <p>京ICP备 14030440号</p>
                <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
            </div>
        </div>
    </footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                search: '', //输入框内容
                hotSearchArr: [{name: '严选车社区', url: 'forumIndex.html'}, {name: '严选车', url: 'index.html'},
                    {name: '二手车', url: ''}, {name: '车友会', url: ''}], //热搜
                userArr: [], //用户
                celebrity: [
                    {name: '张三', img: 'forumImg/celebrity1.jpg', url: '', description: '互联网二手车如何革新买卖体验'},
                    {name: '李四', img: 'forumImg/celebrity2.jpg', url: '', description: '二环十三郎教你选二手车'},
                    {name: '王二', img: 'forumImg/celebrity3.jpg', url: '', description: '古董局中局之中古车的秘密'},
                    {name: '麻子', img: 'forumImg/celebrity4.jpg', url: '', description: '“汽车自媒体”卖车 晓敏粉们约吗？'}], //名人
                originality: [], //原创
                artNo1: {}, //热度第一的文章
                articleArr: [{
                    title: '选择恐惧症？二手车买自吸还是增压？',
                    url: 'https://bbs.renrenche.com/forum.php?mod=viewthread&tid=126233',
                    author: '小可',
                    created: '2023-1-30 16:33',
                    readCount: 20,
                    replyCount: 20,
                    img: 'https://misc.rrcimg.com/data/attachment/portal/202301/30/164544c0a4r4dd00mvv5zz.jpg'
                }] //文章
            }
        },
        methods: {
            open() {
                this.$alert('请按 Ctrl+D 键添加到收藏夹', '提示信息', {
                    confirmButtonText: '确定'
                })
            },
            search() {
                // location.href = "/forumResult.html?search="+v.search;
            }
        },
        created: function () {
            // axios.get("/selectFromArt").then(function (response) {
            //     v.articleArr = response.data;
            // })
            // let selected = document.getElementById("mySelect").value;
            // if (selected == 1) {
            //     axios.get("/selectFromArt").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }else if(selected == 2) {
            //     axios.get("/selectFromPost").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }else {
            //     axios.get("/selectFromUser").then(function (response) {
            //         v.articleArr = response.data;
            //     })
            // }
        }
    })
</script>
</html>